import React, { useState } from "react";
import {
  Box,
  Typography,
  TextField,
  Button,
  InputAdornment,
  IconButton,
  Fade,
} from "@mui/material";
import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  const handleLogin = () => {
    if (username === "admin" && password === "123456") {
      localStorage.setItem("token", "mock-token-123"); // 模拟设置 token
      window.location.href = "/";
    } else {
      alert("用户名或密码错误");
    }
  };

  return (
    <Box
      sx={{
        minHeight: "100vh",
        background: "linear-gradient(135deg, #0f1b3d 0%, #1c2a5a 100%)",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        px: 2,
      }}
    >
      <Fade in timeout={800}>
        <Box
          sx={{
            width: 400,
            bgcolor: "#1E2A4B",
            borderRadius: 3,
            boxShadow: "0 12px 30px rgba(10, 23, 57, 0.7)",
            p: 5,
            color: "#E1E8ED",
            textAlign: "center",
          }}
        >
          <Typography
            variant="h4"
            sx={{
              mb: 3,
              fontWeight: "bold",
              color: "#82aaff",
              letterSpacing: 1,
            }}
          >
            企业数字化能力评估平台
          </Typography>

          <Typography
            variant="h6"
            sx={{ mb: 4, fontWeight: 500, color: "#a8bbd6" }}
          >
            欢迎登录
          </Typography>

          <TextField
            fullWidth
            variant="outlined"
            label="用户名"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            margin="normal"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircleOutlinedIcon sx={{ color: "#82aaff" }} />
                </InputAdornment>
              ),
            }}
            sx={{
              mb: 2,
              "& .MuiOutlinedInput-root": {
                color: "#E1E8ED",
                "& fieldset": { borderColor: "#3C5A99" },
                "&:hover fieldset": { borderColor: "#5A78CC" },
                "&.Mui-focused fieldset": { borderColor: "#82aaff" },
              },
              "& .MuiInputLabel-root": { color: "#a8bbd6" },
            }}
          />

          <TextField
            fullWidth
            variant="outlined"
            label="密码"
            type={showPassword ? "text" : "password"}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            margin="normal"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <LockOutlinedIcon sx={{ color: "#82aaff" }} />
                </InputAdornment>
              ),
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowPassword(!showPassword)}
                    edge="end"
                    sx={{ color: "#82aaff" }}
                    aria-label={showPassword ? "隐藏密码" : "显示密码"}
                  >
                    {showPassword ? <VisibilityOff /> : <Visibility />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
            sx={{
              mb: 4,
              "& .MuiOutlinedInput-root": {
                color: "#E1E8ED",
                "& fieldset": { borderColor: "#3C5A99" },
                "&:hover fieldset": { borderColor: "#5A78CC" },
                "&.Mui-focused fieldset": { borderColor: "#82aaff" },
              },
              "& .MuiInputLabel-root": { color: "#a8bbd6" },
            }}
          />

          <Button
            fullWidth
            variant="contained"
            size="large"
            onClick={handleLogin}
            sx={{
              bgcolor: "linear-gradient(90deg, #4e7efc, #2e57f7)",
              background:
                "linear-gradient(90deg, #4e7efc 0%, #2e57f7 100%)",
              boxShadow:
                "0 4px 15px 0 rgba(46, 87, 247, 0.75)",
              fontWeight: "bold",
              letterSpacing: 1,
              color: "#fff",
              textTransform: "none",
              borderRadius: 2,
              "&:hover": {
                bgcolor: "linear-gradient(90deg, #2e57f7, #4e7efc)",
                boxShadow:
                  "0 6px 20px 0 rgba(78, 126, 252, 0.85)",
              },
            }}
          >
            登录
          </Button>
        </Box>
      </Fade>
    </Box>
  );
};

export default LoginPage;
